<template>
  <div id="home">
    <!-- 导航栏 -->
    <Navbar class="home-nav">
      <h2 slot="center">爱购商城</h2>
    </Navbar>
    <Scroll
      class="wrapper"
      ref="scroll"
      :probeType="3"
      :pullUpLoad="true"
      @scroll="scrollPositon"
      @pullingUp="loadMore"
    >
      <!-- 轮播图 -->
      <HomeSwiper
        :banners="banners"
        @swiperImageLoad="swiperImageLoad"
      ></HomeSwiper>
      <!-- 推荐栏 -->
      <Recommend :recommends="recommends"></Recommend>
      <!-- 本周流行 -->
      <Feature></Feature>
      <TabControl
        :titles="['流行', '精选', '新款']"
        @tabClick="tabClick"
        ref="tabControl"
      ></TabControl>
      <!-- 商品列表 -->
      <GoodsList :goods="showGoods"></GoodsList>
    </Scroll>
    <TabControl
      :titles="['流行', '精选', '新款']"
      @tabClick="tabClick"
      ref="tabControl1"
      class="fixed"
      v-show="isTabFixed"
    ></TabControl>
    <!-- 组件不能直接监听点击事件，需要加上事件修饰符native -->
    <BackTop @click.native="backTop" v-show="isShow"></BackTop>
  </div>
</template>

<script>
// 导入主页的轮播图组件
import HomeSwiper from "./childComps/HomeSwiper.vue";
// 导入推荐栏模块
import Recommend from "./childComps/Recommend";
// 导入本周流行模块
import Feature from "./childComps/Feature.vue";
// 导入商品列表模块
import GoodsList from "@/components/content/goods/GoodsList.vue";

// 导入获取数据的函数，面向该函数进行开发
import { getHomeMultidata, getHomeGoods } from "network/home.js";

export default {
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: {
          page: 0,
          list: [],
        },
        new: {
          page: 0,
          list: [],
        },
        sell: {
          page: 0,
          list: [],
        },
      },
      currentType: "pop",
      // 回到顶部是否展示
      isShow: false,
      // tabControl组件到页面顶部的距离
      tabOffSetTop: 0,
      isTabFixed: false,
      saveY: 0,
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  components: {
    HomeSwiper,
    Recommend,
    Feature,
    GoodsList,
  },
  created() {
    // 1.调用请求数据(轮播图&导航栏...数据)方法
    this.getHomeMultidata();
    // 2.请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  // 钩子函数
  activated() {
    // home页面还原到离开时的状态
    this.$refs.scroll.scroll.scrollTo(0, this.saveY, 0);
    this.$refs.scroll.scroll.refresh();
  },
  deactivated() {
    // 切换路由时，记录saveY
    this.saveY = this.$refs.scroll.scroll.y;
  },
  methods: {
    //网络数据请求相关方法
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page++;
      });
    },
    //事件监听方法
    // 状态栏切换
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl.currentIndex = index;
      this.$refs.tabControl1.currentIndex = index;
    },
    // 回到顶部
    backTop() {
      this.$refs.scroll.scroll.scrollTo(0, 0, 1000);
    },
    // 监听滚动位置
    scrollPositon(position) {
      // 是否显示回顶按钮
      position.y < -1000 ? (this.isShow = true) : (this.isShow = false);
      // tabControl是否吸顶
      position.y < -618 ? (this.isTabFixed = true) : (this.isTabFixed = false);
    },
    // 上拉加载更多
    loadMore() {
      // 调用请求商品数据方法
      this.getHomeGoods(this.currentType);
      // 完成上拉加载更多
      this.$refs.scroll.scroll.finishPullUp();
    },
    // 轮播图加载完成，计算 TabControl 高度
    swiperImageLoad() {
      this.tabOffSetTop = this.$refs.tabControl.$el.offsetTop;
      // console.log(this.tabOffSetTop); 618
    },
  },
};
</script>

<style lang="less" scoped>
#home {
  height: 100vh;
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
  }
  .fixed {
    position: fixed;
    background-color: #fff;
    top: 43px;
    left: 0;
    right: 0;
    z-index: 9;
  }
  .wrapper {
    height: calc(100% - 93px);
    overflow: hidden;
  }
}
</style>
